<template>
  <div class="con">
    <el-container>
      <!--</el-aside>-->
      <el-container>
        <el-main style="padding:0;">
          <!-- 放置内容区 -->
          <div class="contbox6_10" v-if="true">
            <p class="titlelist6_10">
              审核管理<span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span
              >外链审核
            </p>
            <div class="content">
              <div class="sousuojg6_10">
                <el-form ref="listQuery" :model="listQuery" label-width="100px">
                  <el-form-item label="归属机构">
                    <el-input
                    readonly
                      placeholder="请输入归属机构"
                      @focus="selectInstitution"
                      v-model="mechanism"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="机构名称">
                    <el-input
                      placeholder="请输入机构名称"
                      v-model="listQuery.officeName"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="手机号">
                    <el-input
                      placeholder="请输入手机号"
                      v-model="listQuery.phone"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-select
                      v-model="listQuery.status"
                      style="width: 100%"
                      placeholder="启用/停用"
                      class="filter-item"
                    >
                      <el-option
                        v-for="item in statusList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="入驻时间">
                    <el-date-picker
                      style="width: 100%"
                      @change="timeDatas"
                      class="filter-item"
                      v-model="selectTimes"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      placeholder="请选择开始日期至结束日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-form>
              </div>
              <div class="buttons">
                <el-button
                v-if="isAuth('externaSearch')"
                  type="primary"
                  icon="search"
                  @click="handleSelectList"
                  >搜索
                </el-button>
                <el-button v-if="isAuth('externaReset')" @click="resetTheSearch" type="" icon="edit"
                  >重置</el-button
                >
                <el-button
                    @click="exportFiles"
                    class="butt"
                    style="margin-left:40px"
                    type="primary"
                    v-if="total>0"
                  >
                    批量导出
                  </el-button>
              </div>
              <div style="margin-top: 10px;">
                <el-table
                  :data="list"
                  :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
                  stripe
                  border
                  :row-style="{ height: '0px' }"
                  :cell-style="{ padding: '0px' }"
                  v-loading="listLoading"
                >
                  <!-- <el-table-column
                    type="selection"
                    width="55"
                  ></el-table-column> -->
                  <el-table-column show-overflow-tooltip :span="6" label="机构ID">
                    <template slot-scope="scope">
                      <span>{{ scope.row.officeUid }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column show-overflow-tooltip :span="6" label="机构名称">
                    <template slot-scope="scope">
                      <span>{{ scope.row.officeName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :span="6"
                    show-overflow-tooltip
                    align="center"
                    label="手机号"
                    v-if="sign"
                  >
                    <template show-overflow-tooltip slot-scope="scope">
                      <span>{{ scope.row.phone }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column show-overflow-tooltip :span="6" label="外链位置">
                    <template slot-scope="scope">
                      <span>{{ scope.row.imgUrl }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column show-overflow-tooltip :span="6" label="当前状态">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.status == 0
                          ? "已通过"
                          : scope.row.status == 1
                          ? "不通过"
                          : "未审核"
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column show-overflow-tooltip :span="6" label="更新时间">
                    <template slot-scope="scope">
                      <span>{{ scope.row.updateDate }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column :span="6" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        type="text"
                        v-if="isAuth('outerDetails')"
                        @click="createWindow(scope.row)"
                        >查看</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <div style="font-size: 16px;margin-top: 30px">
                  
                  <div
                    v-show="!listLoading"
                    class="pagination-container"
                  >
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page.sync="listQuery.page"
                      :page-sizes="[20, 50, 100]"
                      :page-size="listQuery.number"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                    ></el-pagination>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-dialog
            :close-on-click-modal="false"
            title="详情"
            width="600px"
            :visible.sync="dialogFormAudiiting"
          >
            <el-form
              :model="form"
              class="dialogBox"
              :rules="rules"
              ref="form"
              label-width="70px"
            >
              <el-row>
                <el-Col :span="24">
                  <el-form-item label="链接图片">
                    <el-image
                      :src="form.imgUrl"
                      style="max-width: 450px;max-height: 800px"
                    >
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </el-form-item>
                </el-Col>
              </el-row>
              <el-row>
                <el-Col :span="24">
                  <el-form-item label="链接">
                    <el-input
                    class="address"
                      :title="form.jumpAddress"
                      v-model="form.jumpAddress"
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-Col>
              </el-row>
              <el-row>
                <el-Col :span="24">
                  <el-form-item label="审核意见">
                    <el-radio-group v-model="form.status">
                      <el-radio label="0">审核通过</el-radio>
                      <el-radio label="1">审核不通过</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-Col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormAudiiting = false">取 消</el-button>
              <el-button type="primary" @click="create('form')"
                >确 定
              </el-button>
            </div>
          </el-dialog>
        </el-main>
        <!--<el-footer style="padding:0;">-->
        <!--<footerbox></footerbox>-->
        <!--</el-footer>-->
        <!--</el-container>-->
      </el-container>
    </el-container>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
import ElRow from "element-ui/packages/row/src/row";
import Tree from "../tree/index";
// 批量导出
import { exportFile } from "../../plugins/expord"
export default {
  name: "shareTheTemplate",
  data() {
    return {
      list: null,
      showType: false,
      mechanism: "",
      total: null,
      listLoading: true,
      checkedAll: false,
      listQuery: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid          officeUid: '',//	机构ID
        officeName: undefined, //	机构名称
        officeType: undefined, //	机构类型
        officeUid: undefined, // 归属机构的编号
        startDate: undefined, //	开始时间
        endDate: undefined, //	结束时间
        page: 1, //第几页
        status:"",
        number: 20 //每页几条
      },
      form: {
        status: "",
        imgUrl: "",
        jumpAddress: ""
      },
      rules: {},
      // urltype: this.GLOBAL.httpurl,//请求地址
      selectTime: [],
      selectTimes: [],
      multipleSelection: [], //选中的数组
      sign: localStorage.getItem("jurisdiction") == 2, //最高权限看到的true
      statusList: [
        { label: "全部", id: ""},
        { label: "已通过", id: "0" },
        { label: "不通过", id: "1" }
      ],
      dialogFormAudiiting: false
    };
  },
  components: {
    ElRow,
    Tree
  },
  created() {
    let that = this;
    that.handleSelectList();
  },

  methods: {
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.listQuery.officeUid = data.uid;
      console.log(this.form.officeUid);
      //归属机构名字
      this.mechanism = data.name;
      // this.
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    //这里结束

    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.list.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation： 界面集合获取数据
     **/
    handleSelectList() {
      let that = this;
      that.listLoading = true;
      that
        .axios({
          //axios请求
          url: "/api/auditing/list",
          method: "POST",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.listQuery
        })
        .then(res => {
          if (res.data.code == "0000") {
            that.list = res.data.data;
            that.total = res.data.total;
            that.listLoading = false;
          } else {
            that.listLoading = false;
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
            // that.$notify({
            //   title: "错误",
            //   message: res.data.msg,
            //   type: "error"
            // });
          }
        });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleSizeChange(val) {
      let that = this;
      that.listQuery.number = val;
      that.handleSelectList();
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleCurrentChange(val) {
      let that = this;
      that.listQuery.page = val;
      that.handleSelectList();
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation：  时间格式化
     **/
    timeData(e) {
      let that = this;
      if (e) {
        that.listQuery.withdrawStartDate = e[0];
        that.listQuery.withdrawEndDate = e[1];
      } else {
        that.listQuery.withdrawStartDate = undefined;
        that.listQuery.withdrawEndDate = undefined;
      }
    },
    timeDatas(e) {
      let that = this;
      if (e) {
        that.listQuery.startDate = e[0];
        that.listQuery.endDate = e[1];
      } else {
        that.listQuery.startDate = undefined;
        that.listQuery.endDate = undefined;
      }
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 导出模板
     * @date:2020/6/11   20:44
     */
    exportFiles() {
      let that = this;
      that.listQuery.status = undefined
      exportFile("/api/auditing/excel/export",that.listQuery,"外链审核")
      // that
      //   .axios({
      //     method: "POST",
      //     url: "/api/auditing/excel/export",
      //     headers: { "Content-Type": "application/json;charset=utf-8" },
      //     data: that.listQuery,
      //     responseType: "arraybuffer"
      //   })
      //   .then(res => {
      //     let blob = new Blob([res.data], {
      //       type: "application/vnd.ms-excel;charset=utf-8"
      //     });
      //     var link = document.createElement("a");
      //     link.href = window.URL.createObjectURL(blob);
      //     let date = new Date();
      //     link.download =
      //       "外链审核列表" +
      //       date.getFullYear() +
      //       (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth()) +
      //       (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
      //       (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
      //       (date.getMinutes() < 10
      //         ? "0" + date.getMinutes()
      //         : date.getMinutes()) +
      //       (date.getSeconds() < 10
      //         ? "0" + date.getSeconds()
      //         : date.getSeconds());
      //     link.click();
      //   })
      //   .catch(e => {});
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 详情查看
     * @date:2020/7/7   19:41
     */
    createWindow(row) {
      let that = this;
      that.resetTheSearchData();
      that
        .axios({
          //axios请求
          url: "/api/auditing/getUpdateAuditing",
          method: "POST",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: row
        })
        .then(res => {
          if (res.data.code == "0000") {
            that.form = res.data.data;
            that.dialogFormAudiiting = true;
          } else {
            that.dialogFormAudiiting = false;
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        });
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 修改状态
     * @date:2020/7/7   20:13
     */
    create() {
      let that = this;
      that
        .axios({
          //axios请求
          url: "/api/auditing/changeStatus",
          method: "POST",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.form
        })
        .then(res => {
          if (res.data.code == "0000") {
            // that.$notify({
            //   title: "修改成功",
            //   message: res.data.msg,
            //   type: "success"
            // });
            that.dialogFormAudiiting = false;
          } else {
            that.dialogFormAudiiting = false;
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        });
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置查询条件
     **/
    resetTheSearch() {
      let that = this;
      this.mechanism = "";
      that.listQuery = {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid          officeUid: '',//	机构ID
        officeName: "", //	机构名称
        officeType: "", //	机构类型
        orderCode: "", //	订单号
        officeUid: "", //机构ID
        status:"",
        channelOrderCode: "", //	渠道订单号
        withdrawAccountType: "", //	提现账户类型
        withdrawAccountNo: "", //	提现帐户号码
        AccountName: "", //	付款账户名
        AccountNo: "", //	付款账户号
        withdrawStartDate: "", //	提现开始时间
        withdraw: "", // EndDate	提现结束时间
        startDate: "", //	开始时间
        endDate: "", //	结束时间
        page: 1, //第几页
        number: 20 //每页几条
      };
      that.selectTime = [];
      that.selectTimes = [];
      that.handleSelectList();
      
    },
    resetTheSearchData() {
      this.form = {
        status: "",
        imgUrl: "",
        jumpAddress: ""
      };
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%;
  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
.fileList {
  display: inline-block;
  border-style: solid dotted dashed double;
  padding: 8px 8px 8px 8px;
  text-align: center;
}
/deep/ .dialogBox{
  display: flex;
 flex-wrap: wrap;
 justify-content: left;
}
.sousuojg6_10{
  width: 100%
}
/deep/ .address > .el-input__inner{
  width:460px
}
</style>
